<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px">
   <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>渠道酬金管理</el-breadcrumb-item>
   <el-breadcrumb-item>第一步</el-breadcrumb-item>
</el-breadcrumb>
    <div id="head">
      <h3>第一步：制定酬金政策</h3>
    </div>
    <el-card class="card">
      <el-form>
        <ul>
          <li>
            <span class="red">政策名称：</span>
            <el-input style="width: 15vw" v-model.trim="policyName"></el-input>
            <el-button @click="copyModel" type="primary">拷贝模板</el-button>
          </li>
          <li>
            <span class="red">政策有效期：</span>
            <el-date-picker
              type="date"
              placeholder="选择起始日期"
              v-model.trim="startDate"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            ~
            <el-date-picker
              type="date"
              placeholder="选择结束日期"
              v-model.trim="endDate"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </li>
          <!-- 科目选择 -->
          <li>
            <span class="red">酬金科目：</span>
            <el-input
              :disabled="true"
              style="width: 15vw"
              v-model="moneySubject"
            ></el-input>
            <i class="el-icon-folder-opened" @click="subject"></i>
          </li>

          <li>
            <span class="red">政策封顶金额：</span>
            <el-checkbox
              v-model.trim="topMoneyShow"
              style="margin-right: 20px"
            ></el-checkbox>
            <el-input
              style="width: 15vw"
              v-if="topMoneyShow"
              v-model.trim.number="topMoney"
            ></el-input>
            <span v-if="topMoneyShow">（单位：元）</span>
          </li>
          <li>
            <span>其他选项：</span>
            <el-checkbox v-model.trim="isShow" @click="blankSelect"
              >是否需要关联其他的业务量</el-checkbox
            >
          </li>

          <li v-if="isShow">
            <span class="red">关联政策名称：</span>
            <el-input
              style="width: 15vw"
              v-model="OtherPolicyName"
              :disabled="true"
            ></el-input>
            <i class="el-icon-folder-add" @click="otherPolicy"></i>
          </li>
          <!-- 选择关联政策名称 -->

          <li v-if="isShow">
            <span class="red">关联类型：</span>
            <el-radio-group v-model.trim="otherType">
              <el-radio label="1">被关联政策已结算</el-radio>
              <el-radio label="2">被关联政策已结算本政策才能结</el-radio>
              <el-radio label="3">被关联政策未结算，本政策才能结</el-radio>
            </el-radio-group>
          </li>
          <li v-if="isShow">
            <span class="red">关联月数：</span>
            <el-select placeholder="请选择关联月数" v-model.trim="relMonth">
              <el-option :value="item" v-for="item in monthArr" :key="item">{{
                item
              }}</el-option>
            </el-select>
          </li>

          <li>
            <span>公文关联</span>

            <input ref="inputFile" type="file" id='file' />
            <el-button type="primary" @click.prevent="pushFile"
              >提交上传的文件</el-button
            >
          </li>

          <li>
            <a type="text" @click.prevent="textGet">或选择已经上传的公文</a>
           {{textShow}}
          </li>

          <li>
            <span class="red">核酬次数限定</span>
            <el-input
              type="text"
              v-model.number.trim="numberLimit"
              style="width: 15vw"
            >
            </el-input>
          </li>

          <li id="save">
            <el-button type="primary" class='left' @click="caogaoBox">草稿箱</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </li>
        </ul>
        <div id="modalkuang">
          <!-- 选择公文 -->

          <el-dialog
            title="选择公文"
            :visible.sync="dialogVisible"
            width="50%"
            style="heigth: 500px"
          >
            <div v-for="item in textData" :key="item.documentName">
              <a href="" @click.prevent="getDocumentId(item.id,item.documentName)">
                {{ item.id }}--{{ item.documentName }}</a
              >
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
          </el-dialog>

          <!-- 选择科目 -->

          <el-dialog
            title="选择科目"
            :visible.sync="subjectVisible"
            width="50%"
            style="heigth: 500px"
          >
            <ul>
              <li v-for="item in resultSubjectArr" :key="item.id">
                <a
                  href=""
                  @click.prevent="getCourseId(item.id,item.courseName)"
                  >{{ item.courseName }}</a
                >
              </li>
            </ul>
            <span slot="footer" class="dialog-footer">
              <el-button @click="subjectVisible = false">取 消</el-button>
            </span>
          </el-dialog>

          <el-dialog
            title="选择关联政策名称"
            :visible.sync="otherPolicyShow"
            width="50%"
            style="text-align:center"
          >
            <ul>
              <li v-for="item in otherPolicyArr" :key="item.id">
                <a
                  href=""
                  @click.prevent="getOtherPolicyId(item.id, item.policyName)"
                  >{{ item.policyName }}</a
                >
              </li>
            </ul>
            <span slot="footer" class="dialog-footer">
              <el-button @click="otherPolicyShow = false">取 消</el-button>
            </span>
          </el-dialog>

          <el-dialog
            title="确认信息"
            :visible.sync="infoShow"
            width="50%"
            style="heigth: 500px"
          >
            <ul>
              <li>
                <span class="left"> 政策名称：{{ policyName }}</span>
                <span class="right"
                  >政策有效期：{{ startDate }}~{{ endDate }}</span
                >
              </li>
              <li>
                <span>政策封顶金额：{{topMoney}}</span>
              </li>
              <li>酬金科目：{{moneySubject}}</li>
              <li class="nav">政策关联设置</li>
              <li>关联政策名称：{{OtherPolicyName}}</li>
              <li>关联类型：{{otherType }}</li>
              <li>关联月数：{{relMonth}}</li>
              <li>关联方式：连续月数</li>
              <li>公文关联：{{textShow}}</li>
            </ul>
            <span slot="footer" class="dialog-footer">
             <el-button @click="infoShow = false">确定</el-button>
              <el-button @click="infoShow = false">取 消</el-button>
            </span>
          </el-dialog>
           <el-dialog
            title="选择模板"
            :visible.sync="copyShow"
            width="50%"
            style="heigth: 500px"
          >
            <ul>
              <li v-for='item in modelArr' :key="item.id"> 
                 <a href="" @click.prevent='copyChoose(item.policyLimitList,item.policyRule,item.policyName,item.effectiveTime,item.expirationTime,item.topMoney,item.numberLimit,item.courseId,item.courseName)'>{{item.policyName}}</a> 
              </li>
            </ul>
            <span slot="footer" class="dialog-footer">
             <el-button @click="copyShow = false">确定</el-button>
              <el-button @click="copyShow = false">取 消</el-button>
            </span>
          </el-dialog>
        </div>
      </el-form>
    </el-card>

    <div id="bottom">
      <el-button type="primary" @click="next">下一步</el-button>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
export default {
  name:'channel',
  data() {
    return {
      policyName: "",
      startDate: "",
      endDate: "",
      topMoney: "",
      topMoneyShow: false,
      isShow: "",
      relMonth: "",
      monthArr: [],
      otherPolicyArr: [],
      resultSubjectArr: [],
      textData: "",
      dialogVisible: false,
      subjectVisible: false,
      otherPolicyShow: false,
      infoShow: false,
      otherType: "",
      OtherPolicyId: "",
      OtherPolicyName: "",
      courseid: "",
      moneySubject: "",
      documentId: "",
      numberLimit: "",
      callback: "",
      symbol: "",
      textShow:'',
      isCaogao:false,
      path:'',
      copyShow:false,
      modelArr:[],
      step2Arr:[],
      step3Arr:[]
    };
  },
  methods: {
    getI() {
      for (let i = 0; i < 100; i++) {
        this.monthArr.push(i);
      }
    },
    subject() {
      this.subjectVisible = true;
      this.$axios
        .get("api/course/selectAll ")
        .then((res) => {
          console.log(res);
          if (res.status >= 200 && res.status <= 300) {
            this.resultSubjectArr = res.data.data;
          }
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    textGet() {
      this.dialogVisible = true;
      this.$axios
        .get("api/document/selectAll")
        .then((res) => {
          console.log(res);
          if (res.status >= 200 && res.status <= 300) {
            this.selectClick = true;
            this.textData = res.data.data;
          }
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    otherPolicy() {
      this.otherPolicyShow = true;
      this.$axios.get("/api/policyInfo/selectAll").then((res) => {
        console.log(res);
        if (res.status >= 200 && res.status <= 300) {
          this.otherPolicyArr = res.data.data;
        }
      });
    },
    blankSelect() {
      if (isShow === false) {
        this.OtherPolicyName = "";
      }
    },

    getOtherPolicyId(id, name) {
      this.OtherPolicyId = id;
      this.OtherPolicyName = name;
      this.otherPolicyShow = false;
    },
    getCourseId(id, name) {
      this.courseid = id;
      this.moneySubject = name;
      this.subjectVisible = false;
    },
    getDocumentId(id,name) {
      this.documentId = id;
      if(this.callback==''){
      this.textShow=name
      }
      this.dialogVisible = false;
    },
    pushFile() {
      const fd = new FormData();
      fd.append("file", this.$refs.inputFile.files[0]);
      this.$axios
        .post("api/fileUpLoadServlet", fd, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.status >= 200 && res.status <= 300) {
            this.$alert("上传成功");
            this.callback = res.data;
          }
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    next() {
      console.log(this.OtherPolicyId,this.OtherPolicyName);
     
      if(this.isCaogao==true){
          if (
        this.policyName != "" &&
        this.startDate != "" &&
        this.endDate != "" &&
        this.moneySubject != "" &&
        this.topMoney != ""
      ) {
        if (this.callback != "") {
          this.textShow= this.callback;
          this.$route.query.modelId=this.modelId
          this.$axios
            .post("api/policyInfo/insert", {
              policyName: this.policyName,
              effectiveTime: this.startDate,
              expirationTime: this.endDate,
              topMoney: this.topMoney,
              otherType: this.otherType,
              otherPolicyId: this.OtherPolicyId,
              courseId: this.courseid,
              documentId: this.callback,
              numberLimit: this.numberLimit,
              id:this.symbol
            })
            .then((res) => {
              this.$alert(res.data.msg)
              console.log(res);
              if (res.data.code >= 200 && res.data.code < 300) {
                this.symbol=res.data.data
             if(this.step2Arr.length!=0&&this.step3Arr.length!=0){
                   this.$router.push({
                     name:'channelStep2',
                     params:{
                       step2:this.step2Arr,
                       step3:this.step3Arr,
                       symbol:this.symbol
                     }
                   });
                }else{
                   this.$router.push(`/channelStep2?symbol=${this.symbol}`);
                }
                
              }
                 console.log(res);
            })
            .catch((err) => {
              this.$alert(err);
            });
        } else {
          this.$axios
            .post("api/policyInfo/insert", {
              policyName: this.policyName,
              effectiveTime: this.startDate,
              expirationTime: this.endDate,
              topMoney: this.topMoney,
              otherType: this.otherType,
              otherPolicyId: this.OtherPolicyId,
              courseId: this.courseid,
              documentId: this.documentId,
              numberLimit: this.numberLimit,
              id:this.symbol
            })
            .then((res) => {
              console.log(res);
              this.$alert(res.data.msg)
              if (res.data.code >= 200 && res.data.code < 300) {
                this.symbol=res.data.data
               if(this.step2Arr.length!=0&&this.step3Arr.length!=0){
                   this.$router.push({
                     name:'channelStep2',
                     params:{
                       step2:this.step2Arr,
                       step3:this.step3Arr,
                       symbol:this.symbol
                     }
                   });
                }else{
                   this.$router.push(`/channelStep2?symbol=${this.symbol}`);
                }
              }
            })
            .catch((err) => {
              this.$alert(err);
            });
        }
      } else {
        this.$alert("请完整输入！");
      }
      }else{
  if (
        this.policyName != "" &&
        this.startDate != "" &&
        this.endDate != "" &&
        this.moneySubject != "" &&
        this.topMoney != ""
      ) {
        if (this.callback != "") {
          this.textShow= this.callback
          this.$axios
            .post("api/policyInfo/insert", {
              policyName: this.policyName,
              effectiveTime: this.startDate,
              expirationTime: this.endDate,
              topMoney: this.topMoney,
              otherType: this.otherType,
              otherPolicyId: this.OtherPolicyId,
              courseId: this.courseid,
              documentId: this.callback,
              numberLimit: this.numberLimit,
            })
            .then((res) => {
              this.$alert(res.data.msg)
              console.log(res);
              if (res.data.code >= 200 && res.data.code < 300) {
                this.symbol=res.data.data
                if(this.step2Arr.length!=0&&this.step3Arr.length!=0){
                   this.$router.push({
                     name:'channelStep2',
                     params:{
                       step2:this.step2Arr,
                       step3:this.step3Arr,
                       symbol:this.symbol
                     }
                   });
                }else{
                   this.$router.push(`/channelStep2?symbol=${this.symbol}`);
                }
              }
                 console.log(res);
            })
            .catch((err) => {
              this.$alert(err);
            });
        } else {
          this.$axios
            .post("api/policyInfo/insert", {
              policyName: this.policyName,
              effectiveTime: this.startDate,
              expirationTime: this.endDate,
              topMoney: this.topMoney,
              otherType: this.otherType,
              otherPolicyId: this.OtherPolicyId,
              courseId: this.courseid,
              documentId: this.documentId,
              numberLimit: this.numberLimit,
            })
            .then((res) => {
              console.log(res);
              this.$alert(res.data.msg)
              if (res.data.code >= 200 && res.data.code < 300) {
                this.symbol=res.data.data
                if(this.step2Arr.length!=0&&this.step3Arr.length!=0){
                   this.$router.push({
                     name:'channelStep2',
                     params:{
                       step2:this.step2Arr,
                       step3:this.step3Arr,
                       symbol:this.symbol
                     }
                   });
                }else{
                   this.$router.push(`/channelStep2?symbol=${this.symbol}`);
                }
              }
            })
            .catch((err) => {
              this.$alert(err);
            });
        }
      } else {
        this.$alert("请完整输入！");
      }
      }
    
    },
    save() {
      this.infoShow = true;
    },
    caogaoBox(){
      this.caogaoBox=true;
      
      this.$axios.post("api/policyInfo/selectByPromoter").then((res)=>{
        if(res.data.code>=200&&res.data.code<300){
        this.topMoneyShow=true,
        this.path=res.data.data[0].documentPath
        this.policyName=res.data.data[0].policyName,
        this.startDate=res.data.data[0].effectiveTime,
       this.endDate=res.data.data[0].expirationTime ,
       this.moneySubject=res.data.data[0].courseName,
       this.topMoney=res.data.data[0].topMoney,
        this.textShow=res.data.data[0].documentName,
        this.numberLimit=res.data.data[0].numberLimit,
        this.symbol=res.data.data[0].id
        console.log(res.data.data[0]);
        }else{
          this.$alert(res.data.code)
        }
        // this.$store.dispatch('caogaoBox',res.data.data)
        
        
      }).catch((err)=>{
        this.$alert(err)
      })
    },
  copyChoose(step2,step3,name,start,end,top,limit,courseId,courseName){
    this.topMoneyShow=true
    this.copyShow=false
     this.step2Arr=step2
    this.step3Arr=step3
    this.policyName=name
    this.startDate=start,
    this.endDate=end,
    this.topMoney=top, 
    this.numberLimit=limit,
    this.courseid=courseId
    this.moneySubject=courseName
  },
    copyModel(){
      this.copyShow=true
      this.$axios.post('/api/policyInfo/selectModel').then((res)=>{
        console.log(res.data.data)
        this.modelArr=res.data.data
      }).catch((err)=>{
        this.$alert(err)
      })
    }
  },

  created() {
    this.getI();
  },
};
</script>

<style scoped>
* {
  font-family: initial;
  font-weight: 500;
}
a {
  color: #409eff;
  text-decoration: none;
  font-size: 16px;
}
.nav{
  text-align: center;
  background-color: #409EFF;
  color:white;
  font-size: 18px;
}
a:hover {
  color: #66b1ff;
}
/* .el-dialog{
  overflow: scroll !important;
} */
#save {
  text-align: center;
}
.card {
  text-align: left;
}
button {
  margin: 0px 20px;
}
ul li {
  list-style-type: none;
  margin: 20px 0px;
  height: 7vh;
  line-height: 7vh;
}
.left {
  float: left;
}
.right {
  float: right;
}
.red::before {
  content: "*";
  left: -2px;
  bottom: 5px;
  color: red;
}
i {
  margin: 0px 20px;
  font-size: 18px;
  cursor: pointer;
}
span {
  margin: 0px 10px;
}
#bottom,
#head {
  width: 100%;
  height: 10vh;
  line-height: 10vh;
  text-align: center;
}
#head {
  background: linear-gradient(to top, #99c9f1, #7cc4ff, #99c9f1);
}
#head h3 {
  font-weight: 900;
}
i {
  font-size: 28px;
  position: relative;
  top: 5px;
  color: #409eff;
}
#file{
   color: #409eff;
}
</style>